<template>
    <div class="articlehead">
        <router-link to="/" :class="$route.path==='/'? 'active':''">所有</router-link>
        <router-link
            v-for="(item, index) in categoryList"
            :key="index"
            :to="'/category/' + item.label"
            :class="$route.path==='/category/'+item.label? 'active':''"
            >{{ item.label }}</router-link
        >
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
    data() {
        return {
            i: -1,
        };
    },
    props: ["categoryList"],
    computed: {
        ...mapState({
            articleList: (state) => state.article.articleList,
        }),
    },
    methods: {
        changeTag(index) {
            this.i = index;
        },
        ...mapActions({
            getCategoryData: "article/getCategoryData",
        }),
        ...mapMutations({
            update: "article/update",
        }),
    },
};
</script>

<style scoped>
.articlehead {
  padding: 1rem;
  background: var(--bg-second);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
}
.articlehead a:first-of-type {
  padding-left: 0;
}
.articlehead a {
  padding: 0 12px;
  color: var(--main-text-color);
}
.articlehead a:hover {
    color: #ff0064;
}
.articlehead .active{
    color: #ff0064;
}

</style>
